<!--
 * @Description: 用户端设置主页
 * @version: 电子名片2.1
 * @Author: 付小清
 * @Date: 2020-10-30 14:26:06
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-04-21 11:35:00
-->

<template>
  <div class="mainbox">
    <div class="table-box">
      <el-tabs v-model="tabVal" @tab-click="tabClick">
        <el-tab-pane
          v-for="(item, index) in tabList"
          :key="index"
          :label="item.label"
          :name="item.value"
        />
      </el-tabs>
      <!-- 组件 -->
      <FromGroup v-if="tabVal !== 'reportChat' && tabVal !== 'reportDynamic' && tabVal !=='reportCart'" :show.sync="show" :list="list" :detail="param" />
      <reportChat v-else-if="tabVal == 'reportChat'" />
      <reportDynamic v-else-if="tabVal == 'reportDynamic'" />
      <reportCart v-else-if="tabVal=='reportCart'" />
    </div>
  </div>
</template>

<script>
// 组件引入
import reportChat from './UserSet/reportChat'
import reportDynamic from './UserSet/reportDynamic'
import FromGroup from './UserSet/FromGroup'
import reportCart from './UserSet/reportCart'
// 接口
import { getCommonConfig } from '@/api/basics'
// 页面配置
import { formList } from './count'

export default {
  components: {
    reportChat,
    reportDynamic,
    FromGroup,
    reportCart
  },
  data() {
    return {
      tabVal: 'NEIGHBORHOOD_SETTINGS',
      tabList: [
        { label: '附近设置', value: 'NEIGHBORHOOD_SETTINGS' },
        { label: '临时聊天设置', value: 'TEMPORARY_CHAT_SETTINGS' },
        { label: '聊天举报设置', value: 'reportChat' },
        { label: '动态举报设置', value: 'reportDynamic' },
        { label: '名片举报设置', value: 'reportCart' },
        { label: '冻结禁用设置', value: 'DISABLE_FROZEN_SETTINGS' },
        { label: '幻灯片设置', value: 'SLIDE_SETUP' },
        { label: '话题设置', value: 'TOPIC_SET' },
        { label: '热门设置', value: 'TOPIC_HOT_SET' }
      ],
      list: [],
      param: {},
      source: {},
      show: true // 因为切换的时候表单验证会出现提示所以才加的属性
    }
  },
  mounted() {
    this.tabClick()
  },
  methods: {
    // 切换
    tabClick(e) {
      this.show = false
      this.list = formList[this.tabVal]
      if (this.tabVal !== 'reportChat' && this.tabVal !== 'reportDynamic' && this.tabVal !== 'reportCart') {
        getCommonConfig({ id: this.tabVal }).then((res) => {
          this.source = res.data
          this.paramFilter(res.data)
          this.show = true
        })
      }
    },
    // 将后端返回数组数据改为对象
    paramFilter(data) {
      const detail = {
        detail_type: this.tabVal
      }
      data.filter((item) => {
        detail[item.settingCode] = item.settingContent
      })
      this.param = detail
    }
  }
}
</script>

